<template>
    <div class="manageBird">
        <el-container>
            <el-header height='0'>
            </el-header>
            <el-main>
              <el-select v-model="value" clearable placeholder="请选择" style="width: 300px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button  type="primary" style="background-color: #009688;" @click='search'>搜索</el-button>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%;margin-top: 10px;">
                    <!-- <el-table-column
                    label="鸟种名称"
                   >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.birdInfoName }}</span>
                    </template>
                    </el-table-column> -->
                    <el-table-column
                      prop="birdInfoName"
                      label="鸟种名称">
                    </el-table-column>
                    <!-- <el-table-column
                      prop="nickname"
                      label="用户名">
                    </el-table-column> -->
                    <el-table-column
                      prop="address"
                      label="观鸟地点">
                    </el-table-column>
                    <el-table-column
                      prop="num"
                      label="数量">
                    </el-table-column>
                    <el-table-column
                      prop="picNum"
                      label="图片数量">
                    </el-table-column>
                    <el-table-column
                      prop="voiceNum"
                      label="音频数量">
                    </el-table-column>
                    <!-- <el-table-column
                      prop="videoNum"
                      label="视频数量"> -->
                    </el-table-column>
                    <el-table-column
                      label="ugc审核状态">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.status | statusFilter }}</span>
                    </template>
                    </el-table-column>
                    <el-table-column label="上架状态">
                    <template slot-scope="scope">
                      <el-switch
                      @change="switchChange(scope.row)"
                        v-model="scope.row.onShelf == '0' ? false : true"
                        >
                      </el-switch>
                      <span>{{scope.row.onShelf | shelfStatus}}</span>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    style='text-align: right;margin-top: 10px;'
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-main>
        </el-container>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  export default {
    name: 'auditData',
    data () {
      return {
        tableData: [],
        total:1,
        pageNo:1,
        pageSize:10,
        url:'',
        headers:{},
        value:'',
        options:[
          {
            value: '0',
            label: '审核中'
          },
          {
            value: '1',
            label: '审核通过'
          },
          {
            value: '2',
            label: '免审通过'
          },
          {
            value: '3',
            label: '审核不通过'
          }
        ]
      }
    },
    components:{ 
    },
    created() {
      const date =  Date.parse(new Date())
      this.headers = {
        'X-Access-Token': this.$md5('04d2b9c8e69d11ebba5700ff9c30bc21,' + date)
      }
      axios.get('/api/checklogin').then(res=>{
        console.log(Number(res.data.result))
        if(Number(res.data.result) !== 200) {
          // window.location.protocol + window.location.host +
          window.location.href =  '/admin_lwj_sys/login/index.html'
        }
      })
      this.getAuditList()
    },
    filters:{
      statusFilter(v) {
        let data = ['审核中','审核通过','免审通过','审核不通过']
        return data[v]
      },
      shelfStatus(v) {
        if(v == 1) {
          return '已上架'
        }else  {
          return '未上架'
        }
      }
    },
    watch:{
      value(v) {
        this.getAuditList()
      }
    },
    methods: {
      getAuditList() {
        axios.get('https://testbirdsofchina.gongyi.tencent-cloud.net/bird-system/bird/watching-record/ugcRecordPage',{
                params:{
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    status: this.value
                }
            }).then(res=>{
                this.tableData = res.data.result.records
                this.total = res.data.result.total
        })
      },
      handleCurrentChange(v){
        this.pageNo = v
        this.getAuditList()
      },
      // 查看详情
      handleDetail(index,data) {

      },
      switchChange(data) {
        axios.put(`https://testbirdsofchina.gongyi.tencent-cloud.net/bird-system/bird/watching-record/changeOnShelf?id=${data.id}`).then(res=>{
          this.getAuditList()
        })
      },
      
      search() {
        this.getAuditList()
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style>
    .el-table td,.el-table th {
      padding: 5px 0;
    }
    .el-table__header tr th {
      height: 60px;
      background-color: #e6e6e6;
      font-size: 16px;
    }
  </style>
  